﻿@{
    ViewBag.Title = "ITSM";
}
@section ScriptAndCss{
    <script src="@Url.Content("~/Scripts/highcharts.js")" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            $('#btn_refresh').click();
        }
        function formateDesc(value, row, index) {
            var abValue = value;
            if (value.length >= 22) {
                abValue = value.substring(0, 19) + "...";
            }
            var content = '<a href="#" title="' + value + '" class="note">' + abValue + '</a>';
            return content;
        }
        $(function () {
            $('#dg').datagrid({
                onLoadSuccess: function (data) {
                    $(".note").tooltip({
                        onShow: function () {
                            $(this).tooltip('tip').css({
                                width: '300',
                                boxShadow: '1px 1px 3px #292929'
                            });
                        }
                    });
                },
                onDblClickRow: function (rowIndex, rowData) {
                 var rnd = (new Date()).getMilliseconds() + "" + parseInt(Math.random() * 10000);
                    $.ajax({
                        url: 'GetURL',
                        data: { type: rowData.TypeS, ids: rowData.IDS, nocatch: rnd },
                        success: function (result) {
                            window.open("/Account/SSO?redirectionUrl=" + encodeURI(result)+"catchid="+rnd);
                        }

                    });
                }
            });
            var p = $('#dg').datagrid('getPager');

            $(p).pagination({
                beforePageText: '第',

                afterPageText: '页    共 {pages} 页',

                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'

            });
            $('#startdt').datebox({
                currentText: '今天',
                closeText: '关闭'
            });
            $('#enddt').datebox({
                currentText: '今天',
                closeText: '关闭'
            });
            $('#btn_refresh').linkbutton({
                plain: false
            });
            $('#btn_refresh').click(function () {
//                var option = {
//                    chart: {
//                        renderTo: 'unfinished',
//                        type: 'column',
//                        margin: [30, 2, 30, 2]
//                    },
//                    title: { text: '未完成工单统计'
//                    },
//                    xAxis: {
//                        categories: [],
//                        labels:
//                 {
//                     align: 'center',
//                     style: {
//                         fontSize: '13px',
//                         fontFamily: 'Verdana, sans-serif'
//                     }
//                 }
//                    },
//                    yAxis: {
//                        title: { text: '解决率' },
//                        min: 0,
//                        gridLineWidth: 0
//                    },
//                    legend: {
//                        layout: 'vertical',
//                        enabled: true,
//                        align: 'right',
//                        verticalAlign: 'middle',
//                        x: 10,
//                        y: 20
//                    },
//                    tooltip: {
//                        formatter: function () {
//                            return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + '总量:' + this.point.stackTotal;
//                        }
//                    },
//                    plotOptions: {
//                        column: {
//                            stacking: 'normal',
//                            dataLabels: {
//                                enabled: true,
//                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black'
//                            }
//                        }
//                    },
//                    series:
//                [{
//                    name: '未解决',
//                    color: '#c0504e',
//                    data: []
//                },
//                 { name: '已解决',
//                     color: '#4f81bc',
//                     data: []
//                 }]
//                };
                var pie = {
                    chart: {
                        renderTo: '',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: { text: '' },
                    tooltip: {
                        pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b><br />{point.name}：<b>{point.y}</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            size: 100,
                            dataLabels: {
                                enabled: true,
                                 distance: 20,
                                 formatter: function() {  
                   if (this.percentage > 0)  
                       return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 1) + ' %';   
               }
                            },
                            showInLegend: false
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: '百分比',
                        colors: ['#c0504e', '#4f81bc'],
                        data: []
                    }]
                };
                var bd = $('#startdt').datetimebox('getValue');
                var ed = $('#enddt').datetimebox('getValue');
                @*//$.post('@Url.Action("GetSiteReport", "ITSM")', { startdate: bd, enddate: ed },
            //function (result) {
            //    option.xAxis.categories = result.categories;
            //    option.series[0].data = result.seriesdata; option.series[1].data = result.seriesdata2;
            //    var chart = new Highcharts.Chart(option);
           // });*@
                $.post('@Url.Action("GetSitePieReport", "ITSM")', { startdate: bd, enddate: ed, type: 'service' },
            function (result) {
                pie.series[0].data = result;
                pie.chart.renderTo = 'unresolvedservice';
                pie.title.text = '自服务解决率';
                var chart = new Highcharts.Chart(pie);
            });
                $.post('@Url.Action("GetSitePieReport", "ITSM")', { startdate: bd, enddate: ed, type: 'incident' },
             function (result) {
                 pie.series[0].data = result;
                 pie.chart.renderTo = 'unresolvedincident';
                 pie.title.text = '事件解决率';
                 var chart = new Highcharts.Chart(pie);
             });
                $.post('@Url.Action("GetSitePieReport", "ITSM")', { startdate: bd, enddate: ed, type: 'change' },
             function (result) {
                 pie.series[0].data = result;
                 pie.chart.renderTo = 'unresolvedchange';
                 pie.title.text = '变更解决率';
                 var chart = new Highcharts.Chart(pie);
             });
                $('#dg').datagrid('options').url = "GetSiteTableData?startdate=" + bd + "&enddate=" + ed;
                $('#dg').datagrid('reload');
            });
        }); </script>
}
<style type="text/css">
    .main_left .left_menu
    {
        border: 1px solid #92a9bb;
    }
</style>
<div style="height:100%;">
    <div class="padding5">
        <label>
            开始时间</label>
        <input id="startdt" type="text" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <label>
            结束时间</label>
        <input id="enddt" type="text" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a id="btn_refresh"
            iconcls="icon-reload">刷新</a>
    </div>
    <div style="height:94%;">
        <div class="padding5" style="height:50%;padding:0 5px;">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    @* <td>
                        <div id="unfinished" style="width: 250px; height: 200px;">
                        </div>
                    </td>*@
                    <td width="470">
                        <div id="unresolvedservice" class="dropshadow2">
                        </div>
                    </td>
                    <td width="470">
                        <div id="unresolvedincident" class="dropshadow2">
                        </div>
                    </td>
                    <td width="470">
                        <div id="unresolvedchange" class="dropshadow2">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div style="height:50%;padding:0 5px;">
            <div class="easyui-panel" fit="true" title="未完成工单">
                <table id="dg" fit="true" class="" data-options="fitColumns:true,pagination:true,singleSelect:true,url:'ITSM/GetSiteTableData',pageSize:'10',rownumbers:true">
                    <thead>
                        <tr>
                            <th field="IDS" width="120px" resizable="false" sortable="true">
                                请求ID
                            </th>
                            <th field="TypeS" width="80" resizable="false" sortable="true">
                                请求类型
                            </th>
                            <th field="Description" width="200px" resizable="false" formatter="formateDesc" sortable="true">
                                摘要
                            </th>
                            <th field="Status" width="50px" resizable="false" sortable="true">
                                状态
                            </th>
                            <th field="AssigneeGroup" width="100px" resizable="false" sortable="true">
                                受派组
                            </th>
                            <th field="Assignee" width="80px" resizable="false" sortable="true">
                                受派人
                            </th>
                            <th field="CreateTime" width="130px" resizable="false" sortable="true">
                                创建时间
                            </th>
                            <th field="Submitter" width="80px" resizable="false" sortable="true">
                                创建人
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
